<template>
  <div class="orderRules">
    <nav-bar :left-arrow="true" :left-text="leftText"></nav-bar>
    <div class="contain">
      <div class="img">
        <img src="../../assets/image.jpg" alt="">
      </div>
      <div class="content">
        <p>计费规则</p>
        <span>预约成功后即开始用车，安起步价30元计费</span>
      </div>
      <div class="content">
        <p>开锁</p>
        <span>预约过程中，您可以打开您预约的车辆或者其他任意车辆驾驶</span>
      </div>
      <div class="content">
        <p>超时取消</p>
        <span>车辆将保留15分钟，超过起步时长仍未开锁将自动取消订单；</span>
        <span>
          由于您取消订单产生的费用不能使用骑行卡和优惠卷支付
        </span>
      </div>
    </div>
    <div class="button">
      <van-button @click="goBack">取消</van-button>
      <van-button @click="order">确认预约</van-button>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar'

export default {
  name: 'OrderRules',
  components: {
    NavBar
  },
  data () {
    return {
      leftText: '预约用车规则'
    }
  },
  created () {
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    order () {
      this.$dialog.alert({
        message: '预订成功，页面即将跳转...',
        showConfirmButton: false
      }).then(() => {
        // on close
      })
      setTimeout(() => {
        this.$dialog.close()
        this.$router.push('/order')
      }, 2000)
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.van-nav-bar__content {
  background-color: #fff !important;
}
/deep/.van-nav-bar__title {
  font-size: 18px;
    color: rgb(148, 146, 146) !important;
}
/deep/.van-nav-bar .van-icon {
    color: rgb(148, 146, 146) !important;
}
/deep/.van-nav-bar__text{
    color: rgb(148, 146, 146) !important;
}
.contain{
  padding: 20px;
  .img{
    width: 100%;
    height: 150px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .content{
    margin: 5px;
    p{
      font-size: 18px;
      line-height: 22px;
    }
    span{
      display: block;
      font-size: 16px;
      line-height: 18px;
    }
  }
}
.button{
  width: 100%;
  position: absolute;
  bottom: 0;
  .van-button{
    width: 50%;
    height: 50px;
  }
  .van-button:nth-child(2){
    background: #0bbef5;
    color: #fff;
  }
}
</style>
